<template>
  <div>
    <van-notice-bar
        left-icon="volume-o"
        scrollable
        :text="gg"
    />

    <van-row style="background: white">
      <van-col span="2">
        <div class="block">
          <el-avatar :size="45" :src="icon" style="margin-top: 3px;margin-left: 11px"></el-avatar>
        </div>
      </van-col>
      <van-col span="14" offset="2">
        <router-link to="/search">
        <van-search placeholder="请输入搜索关键词" shape="round" style="width: 100%;border-radius: 25px" readonly/>
      </router-link>
      </van-col>

      <van-col span="3" style="text-align: center;margin-top: 12.5px">
        <van-icon name="envelop-o" size="30px"/>
      </van-col>

      <van-col span="3" style="text-align: center;margin-top: 12.5px">
       <van-icon name="scan" size="30px"/>

      </van-col>

    </van-row>


    <!--    轮播图-->
    <div class="Mine-categories-swipe">
      <van-swipe class="my-swipe" :autoplay="4000" indicator-color="white">
        <van-swipe-item v-for="item in banner_list" :key="item.id">
          <img :src="item.image" alt="">
        </van-swipe-item>

      </van-swipe>
    </div>
    <!--    滚动类型-->
    <div>
      <van-tabs v-model="active" scrollspy sticky :offset-top="0">
        <van-tab v-for="(index,a) in type_list " :title='index.name'>
          <lazy-component>
            <div>
              <!--                上面4个动漫-->
              <div>

                <van-row>
                  <van-col span="24">

                    <span>{{ index.name }}番剧</span>
                    <hr>
                    <van-row type="flex" justify="space-around" style="text-align: center">

                      <van-col span="10" v-for="ai_comic in comic_all[a]" style="margin-bottom: 5px">
                         <router-link :to="'/comic/'+ai_comic.id">
                        <van-image
                            width="150"
                            height="100"
                            :src="ai_comic.comic_img"

                            fit="fill"
                        />
                        <!--                        <p >{{ai_comic.name}}</p>-->
                        <span style="overflow: hidden;
                              text-overflow: ellipsis;
                              white-space: nowrap;
                              display: inline-block;
                              width: 100%;
                              ">{{ ai_comic.name }}</span>
                         </router-link>

                      </van-col>


                    </van-row>
                    <!--                    -->
                    <van-row style="text-align: center">
                      <router-link :to="'/showall/'+(index.id-1)">
                      <van-button round type="default" style="width: 130px;margin-right: 20px">
                        <van-icon name="eye-o"/>
                        查看更多
                      </van-button></router-link>
                      <van-button round type="default" style="width: 130px" @click="changeComic(a)"><span
                          class="el-icon-refresh"> 换一换</span>
                      </van-button>
                    </van-row>


                  </van-col>

                </van-row>

              </div>
              <!--              下面4个动漫-->
              <div>
                <van-row>
                  <van-col span="24">
                    <p style="text-align: left;">{{index.name}}热播
                      <van-icon name="fire-o" color="#ee0a24"/>
                    </p>
                    <hr>
                    <van-row type="flex" justify="space-around">
                      <van-col span="6" v-for="(update_comic,a) in update_list[a]" style="margin-bottom: 5px;text-align: center">
                        <router-link :to="'/comic/'+update_comic.id">
                        <van-image
                            width="102"
                            height="95"
                            :src="update_comic.comic_img"

                            lazy-load
                            fit="fill"

                        />
                        <p style="overflow: hidden;
                              text-overflow: ellipsis;
                              white-space: nowrap;
                              display: inline-block;
                              width: 100%;">{{ update_comic.name }}</p>

                          <van-tag color="#7232dd" plain>热榜第{{a+1}}</van-tag>
                          </router-link>
                      </van-col>


                    </van-row>


                  </van-col>

                </van-row>

              </div>
            </div>
          </lazy-component>
        </van-tab>

      </van-tabs>
    </div>
    <!--    展示-->
    <van-empty description="别再往下拉啦！没有啦！" image-size="60px" style="margin-bottom: 30px">
    </van-empty>


  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      icon: '',
      h: '210px',
      banner_list: [],
      active: 0,
      type_list: [],
      comic_all: [],
      update_list: [],
      gg:'无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。'

    }
  },
  methods: {
    changeComic(a) {

      this.$axios.get(`${this.$settings.base_url}comic/comiclist/?comic_category=${a + 1}`).then(res => {

        this.comic_all[a] = res.data.results

        this.comic_all.push('1')
        this.comic_all.pop('1')


      })
    },


  },

  mounted() {
    let screnW = window.screen.width
    let picW = 750
    let picH = 400
    let swipeh = Math.floor(picH * screnW / picW) + 'px'
    this.h = swipeh
    this.icon = localStorage.getItem('icon')



  },
  created() {
    this.$axios.get(`${this.$settings.base_url}home/banner/`).then(res => {
          // console.log(res.data)
          this.banner_list = res.data
        }
    )
    // 获取分类

    this.$axios.get(`${this.$settings.base_url}comic/category/`).then(res => {
      this.type_list = res.data
      // console.log(res.data)
    })




  },
  watch: {
    async type_list(val) {


      for (let comic of this.type_list) {
        // console.log(comic.id)
        await this.$axios.get(`${this.$settings.base_url}comic/comiclist/?comic_category=${comic.id}`, {params: {id: comic.id}}).then(res => {
          // console.log(comic)
          this.comic_all.push(res.data.results)
          // console.log(res.data.results)
        })
         await this.$axios.get(`${this.$settings.base_url}comic/comicorder/?comic_category=${comic.id}`, {params: {id: comic.id}}).then(res2=>{
           this.update_list.push(res2.data.slice(0,3))
        })
      }


    },



  },





}
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.my-swipe .van-swipe-item {
  width: 100%;
  height: 180px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #39a9ed;
}

.Mine-categories-swipe img {
  display: inline-block;
  width: 100%;
  height: 180px;
}

</style>